<template>
	<view>
		<!-- 等待支付 -->
		<view class="order-status">等待支付</view>
		<!-- 收货地址 -->
		<navigator url="/pages/home/address/address?type=select" class="address-block" v-if="addressInfo.id">
			<view class="send-name">姓名: {{addressInfo.name}} 电话号码: {{addressInfo.phoneNumber}}</view>
			<view class="address">收货地址: {{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.region}}</view>
		</navigator>
		
		<navigator url="/pages/home/address/address" class="address-block" v-else>
			<view class="">请选择收货地址</view>
		</navigator>
		<!-- order-card -->
		<view class="order-card" > 
		
			<view class="order-title">
				<text>订单编号:{{orderId}}</text>
				<view class="status">等待支付</view>
			</view>
			
			<view class="sku-block" v-for="item in orderList" :key="item.id">
				<image :src="item.productPic" mode=""></image>
				<view class="info">
					<view class="content-top">
						<text class="title">{{item.productName}}</text>
						<text class="price">¥{{item.productPrice}}元</text>
					</view>
					<view class="content-center">
						<text>编号:{{item.productId}}</text>
						<text>数量x{{item.productQuantity}}</text>
					</view>
					<view class="content-bottom">
						<text v-for="ele in item.productAttr" :key="ele.value" style="margin-right: 6rpx;">
							{{ele.key}}:{{ele.value}}
						</text>
					</view>
				</view>
			</view>
			
			<view class="total-price">合计:{{orderBase.totalAmount}}元</view>
			
			<view class="btns">
				<view class="btn" @tap="goPay">确认付款</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import { getPreOrderById , findAllAddress , addConfirmOrder } from "../../../api/home/order/order.js"
	export default {
		data() {
			return {
				// 两条数据,一个orderBase,一个数组orderList
				orderBase:{},
				orderList:[],
				addressInfo:{},
				orderId:''
			};
		},
		methods:{
			init(id){
				getPreOrderById(id).then(res=>{
					this.orderBase = res.data.orderBase;
					this.orderList = res.data.orderItems;
					res.data.orderItems.forEach(ele=>{
						ele.productAttr = JSON.parse(ele.productAttr);
					})
					console.log(res);
				})
			},
			// 获取收货地址
			getAddress(){
				var address = uni.getStorageSync('address');
				if(address){
					this.addressInfo = address;
				}else {
					
					findAllAddress().then(res=>{
						console.log(res);
						var addressList = res.data.items;
						var index = addressList.findIndex(ele=>ele.defaultStatus==1);
						
						if(index != -1){
							this.addressInfo = addressList[index];
							// console.log(this.addressInfo);
						}else{
							this.addressInfo = {};
						}
						
					})
					
				}
				
			},
			goPay(){
				addConfirmOrder({
					addressId: this.addressInfo.id,
					orderId: this.orderId,
					orderItemList:this.orderList,
					payType: 0,
					sourceType: 1,
				}).then(res=>{
					console.log(res)
					uni.navigateTo({
						url:`pay/pay?orderId=${this.orderId}&price=${this.orderBase.totalAmount}`
					})
				})
			}
		},
		onLoad(options) {
			// console.log(options.orderId);
			this.orderId = options.orderId;
			this.init(options.orderId);
		},
		onShow() {
			this.getAddress();
		}
	}
</script>

<style lang="scss" scoped>
	// 等待支付
	.order-status {
		font-size: 36rpx;
		color: #494949;
		height: 88rpx;
		border-bottom: 2rpx solid #e5e5e5;
		line-height: 88rpx;
		margin: 0 60rpx;
		box-sizing: border-box;
	}
	// 收货地址
	.address-block {
		font-size: 28rpx;
		color: #494949;
		border-bottom: 2rpx solid #e5e5e5;
		margin: 0 60rpx;
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	// order-card
	.order-card {
		width: 672rpx;
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #3e3e3e;
		 .order-title {
			 line-height: 32rpx;
			 display: flex;
			 justify-content: space-between;
			 border-bottom: 2rpx solid #f1ece7;
			 padding-bottom: 30rpx;
		 }
		 .sku-block {
			 display: flex;
			 justify-content: flex-start;
			 border-bottom: 2rpx solid #f1ece7;
			 padding: 30rpx 0;
			  image {
				  width: 162rpx;
				  height: 162rpx;
				  flex-shrink: 0;
				  background-color: #8f8f94;
			  }
			  .info {
				  width: 470rpx;
				  margin-left: 28rpx;
				   .content-top {
					   display: flex;
					   justify-content: space-between;
					   align-items: center;
					   font-size: 26rpx;
					   line-height: 74rpx;
					    .title , .price{
							color: #3e3e3e;
						}
				   }
				   .content-center {
					   font-size: 22rpx;
					   color: #8d8d8d;
					   line-height: 30rpx;
					   margin-top: 4rpx;
					   display: flex;
					   justify-content: space-between;
					   align-items: center;
				   }
				   .content-bottom {
					   font-size: 22rpx;
					   color: #8d8d8d;
					   line-height: 30rpx;
					   margin-top: 4rpx;
				   }
			  }
		 }
		 // 合计
		 .total-price {
			 font-size: 26rpx;
			 line-height: 36rpx;
			 text-align: right;
			 margin-top: 14rpx;
		 }
		 // 确认付款按钮
		 .btns {
			 margin-top: 20rpx;
			 display: flex;
			 justify-content: flex-end;
			  .btn {
				width: 124rpx;
				height: 50rpx;
				border: 2rpx solid #2d4f43;
				font-size: 26rpx;
				border-radius: 10rpx;
				color: #2d4f43;
				text-align: center;
				line-height: 50rpx;
				margin-left: 32rpx;
			  }
		 }
	}
</style>
